<template>
    <div class="menu">
        <div class="logo-top" :style="{width:collapse?'63px':'100%'}">
            <img :src="require('@/assets/images/logo.png')" alt="" class="logo">
        </div>
        <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            router
            active-text-color="#f50"
            unique-opened
            :collapse="collapse"
            v-if="userInfo"
        >
            <el-menu-item index="/main/home">
                <el-icon :size="18" class="citon">
                    <House></House>
                </el-icon>
                <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/main/role" v-if="userInfo.role>3">
                <el-icon :size="18" class="citon">
                    <Key></Key>
                </el-icon>
                <span>权限管理</span>
            </el-menu-item>
            <el-sub-menu index="/main/healthy">
                <template #title>
                    <el-icon :size="18" class="citon">
                        <CoffeeCup></CoffeeCup>
                    </el-icon>
                    <span>居民健康</span>
                </template>
                <el-menu-item index="/main/healthy/tiwen">
                    <el-icon :size="18" class="citon">
                        <CoffeeCup></CoffeeCup>
                    </el-icon>
                    <span>体温监测</span>
                </el-menu-item>
                <el-menu-item index="/main/healthy/suan">
                    <el-icon :size="18" class="citon">
                        <CoffeeCup></CoffeeCup>
                    </el-icon>
                    <span>核酸记录</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="/main/user" v-if="userInfo.role>2">
                <template #title>
                    <el-icon :size="18" class="citon">
                        <User></User>
                    </el-icon>
                    <span>用户管理</span>
                </template>
                <el-menu-item index="/main/user/add">
                    <el-icon :size="18" class="citon">
                        <User></User>
                    </el-icon>
                    <span>用户新增</span>
                </el-menu-item>
                <el-menu-item index="/main/user/list">
                    <el-icon :size="18" class="citon">
                        <User></User>
                    </el-icon>
                    <span>用户列表</span>
                </el-menu-item>
                <el-menu-item index="/main/user/data">
                    <el-icon :size="18" class="citon">
                        <User></User>
                    </el-icon>
                    <span>用户分析</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="/main/anno">
                <template #title>
                    <el-icon :size="18" class="citon">
                        <Bell></Bell>
                    </el-icon>
                    <span>公告管理</span>
                </template>
                <el-menu-item index="/main/anno/add">
                    <el-icon :size="18" class="citon">
                        <Bell></Bell>
                    </el-icon>
                    <span>公告新增</span>
                </el-menu-item>
                <el-menu-item index="/main/anno/list">
                    <el-icon :size="18" class="citon">
                        <Bell></Bell>
                    </el-icon>
                    <span>公告列表</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="/main/advise">
                <template #title>
                    <el-icon :size="18" class="citon">
                        <ChatDotSquare></ChatDotSquare>
                    </el-icon>
                    <span>意见管理</span>
                </template>
                <el-menu-item index="/main/advise/add">
                    <el-icon :size="18" class="citon">
                        <ChatDotSquare></ChatDotSquare>
                    </el-icon>
                    <span>意见新增</span>
                </el-menu-item>
                <el-menu-item index="/main/advise/list">
                    <el-icon :size="18" class="citon">
                        <ChatDotSquare></ChatDotSquare>
                    </el-icon>
                    <span>意见列表</span>
                </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/main/mine">
                <el-icon :size="18" class="citon">
                    <Menu></Menu>
                </el-icon>
                <span>个人中心</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
import {CoffeeCup,ChatDotSquare,Bell,Menu,Key,User,House} from "@element-plus/icons-vue"
import { useStore } from 'vuex'
import { computed } from '@vue/runtime-core'

export default {
    components:{
        House,
        User,
        Key,
        Menu,
        Bell,
        ChatDotSquare,
        CoffeeCup
    },
    mounted(){
        console.log(this.$route)
    },
    setup(){
        const store = useStore()
        const handleOpen = ()=>{

        }
        const handleClose = ()=>{

        }
        const collapse = computed(()=>store.state.collapse)
        const userInfo = computed(()=>store.state.userInfo)
        return {
            handleOpen,
            handleClose,
            collapse,
            userInfo
        }
    }
}
</script>


<style lang="scss" scoped>
.menu{
    width:100%;
    height:100%;
    background: #f4f4f4;
}
.menu{
    width:100%;
    .logo-top{
        width:100%;
        padding:20px;
        .logo{
            width:100%;
            height:100px;
        }
    }
    .citon{

    }
}
</style>